#lowc {
	position: absolute;
	z-index: 0;
}

.info {
	margin-left: 10px;
	line-height: 26px;
	border: solid 1px black inset;
    background-color: #aaa;
    display: none;
}

.bline {
	margin-left: 10px;
	background-color: #aaa;
	height: 31px;
	/*line-height: 31px;*/
	padding: 5px;
	display: none;
}

html,
body {
	width: 100%;
	height: 100%;
    background-color: rgb(86, 156, 93);
    background-image: url('../imgs/bg.jpg');
	padding: 0;
	margin: 0;
}

#imgPreview {
	display: none !important;
}

.clear {
	clear: both;
}

#top {
	height: 90%;
}

#menu {
	width: 100%;
	/* background-color: #ccc; */
	margin: 1px 0;
}

#menu ul {
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

#menu ul::after {
	content: ' ';
	clear: both;
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}

#menu li {
	float: left;
	padding: 3px 6px;
}

#menu li:hover {
	box-shadow: 1px 1px 0 white inset, -1px -1px 0 #707070 inset;
}

#menu li a {
	display: block;
	text-decoration: none;
	color: black;
	font-size: 13px;
}

#left {
	height: 84px;
	width: 100%;
	/* background-color: #fff; */
	padding: 5px;
	float: left;
}

#left .tool {
	padding: 0;
	margin: 1px;
	margin-bottom: 2px;
	width: 72px;
	height: 27px;
	border: 1px solid black;
	float: left;
}

.tool span {
	width: 72px;
	height: 27px;
	display:block;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid #7b7b7b;
	border-bottom: 1px solid #7b7b7b;
}

.selected span {
	border-top: 1px solid #7b7b7b;
	border-left: 1px solid #7b7b7b;
	border-right: 1px solid #bdbdbd;
	border-bottom: 1px solid #bdbdbd;
}

#left .selected {
	background: url("") repeat;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
}

#left #lineWeight,
#lineDash,
#slideTest1,
#lineHelp,
#slideTest2 {
	margin-top: 0px;
	margin-left: 1px;
	width: 58px;
	/* height: 70px; */
	float: left;
	/* padding: 5px; */
	box-sizing: border-box;
	border: 1px solid #fff;
	border-top-color: #7b7b7b;
	border-left-color: #7b7b7b;
}

#lineDash,
#slideTest1,
#lineHelp,
#slideTest2 {
	display: none;
}

#left #lineWeight p,
#lineDash p {
	margin-top: 0px;
	margin-bottom: 1px;
	height: 5px;
	padding: 7px 7px;
}

#lineHelp p {
	margin: 0 auto;
	text-align: center;
}

#left #lineWeight .selected,
#lineDash .selected,
#lineHelp .selected {
	background-color: #00007b;
}

#left #lineWeight span,
#lineDash span {
	display: block;
	height: 0px;
	border: 1px solid black;
	/*box-sizing: border-box;*/
}

#left #lineWeight p:nth-child(2) span {
	border: 2px solid black;
}

#left #lineWeight p:nth-child(3) span {
	border: 3px solid black;
}

#left #lineWeight p:nth-child(4) span {
	border: 4px solid black;
}

#left #lineDash p:nth-child(2) span {
	border: 1px dashed black;
}

#left #lineDash p:nth-child(3) span:nth-child(2n) {
	width: 4px;
	float: left;
	margin: 0 1px;
	border: 1x solid black;
}

#left #lineDash p:nth-child(3) span:nth-child(2n+1) {
	width: 1px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(4) span:nth-child(3n+1) {
	width: 5px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(4) span:nth-child(3n) {
	width: 1px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(4) span:nth-child(3n+2) {
	width: 1px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(5) span:nth-child(3n+1) {
	width: 4px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(5) span:nth-child(3n) {
	width: 1px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(5) span:nth-child(3n+2) {
	width: 4px;
	float: left;
	margin: 0 1px;
	border: 1px solid black;
}

#left #lineDash p:nth-child(6) span {
	border: 1px dotted black;
	border-left: 0;
	border-right: 0;
	width: 100%;
}
/* #left  .tool:nth-child(1) span{
	background: url('../imgs/arc.png') top right;
	background-size:100% 100%;
} */

#left  .tool:nth-child(1) span{
	background: url('../imgs/2.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(2) span {
	background: url('../imgs/曲线.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(3) span {
	background: url('../imgs/橡皮.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(4) span {
	background: url('../imgs/喷漆.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(5) span {
	background: url('../imgs/直线.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(6) span {
	background: url('../imgs/椭圆.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(7) span {
	background: url('../imgs/铅笔.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(8) span {
	background: url('../imgs/点击选多边形.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(9) span {
	background: url('../imgs/裁剪.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(10) span {
	background: url('../imgs/文字.png') no-repeat center;
	background-size:100% 100%;
}

#left  .tool:nth-child(11) span {
	background: url('../imgs/图片.png') no-repeat center;
	background-size:100% 100%;
}

#left .tool:nth-child(12) span {
	background: url('../imgs/圆角方框.png') bottom right;
	background-size:100% 100%;
}

#left  .tool:nth-child(13) span {
	background: url('../imgs/图案填充.png') no-repeat center;
	background-size:100% 100%;
}

/*#left .tool:nth-child(2n+1) {*/
	/*margin-right: 2px;*/
/*}*/


#right {
	float: left;
	width: 80%;
	height: 590px;
	margin-left: 10px;
	border: 1px inset;
	background: url(../imgs/canvas_bg.jpg);
}

#right canvas {
	/*height:100%;
    width:100%;*/
	/*background: #fff;*/
	border: 1px inset;
	width: 80%;
	height: 200px;
}

#bottom {
	width: 99%;
	/* height: 10%; */
	height: 50px;
	margin-top: 5px;
	/* background-color: #fff; */
}

#colorPicker {
	padding: 5px;
}

#colorPicker::after {
	content: ' ';
	clear: both;
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}

#currentColor {
	height: 15px;
	width: 15px;
	padding: 7.5px;
	background: url("") repeat;
	float: left;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}

#currentColor span {
	display: block;
	background-color: #000;
	border-top: 1px solid #c0c0c0;
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	box-shadow: 1px 1px 0 white inset, -1px -1px 0 #707070 inset;
	box-sizing: border-box;
	width: 15px;
	height: 15px;
}

#availableColor {
	float: left;
	width: 210px;
	height: 31px;
	margin-left: 5px;
}

#availableColor .colors {
	float: left;
	width: 13px;
	height: 13px;
	border-top: 1px solid #7B7B7B;
	border-left: 1px solid #7B7B7B;
	border-right: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	box-shadow: 1px 1px 0px black inset;
	/* box-sizing: border-box; */
}

#availableColor .colors span {
	width: 13px;
	height: 13px;
	display: block;
	background-color: #000;
	border-left: 1px solid black;
	border-top: 1px solid black;
	box-sizing: border-box;
}

#availableColor .colors:nth-child(2) span {
	background-color: #787878;
}

#availableColor .colors:nth-child(3) span {
	background-color: #791815;
}

#availableColor .colors:nth-child(4) span {
	background-color: #757a23;
}

#availableColor .colors:nth-child(5) span {
	background-color: #367a1b;
}

#availableColor .colors:nth-child(6) span {
	background-color: #317778;
}

#availableColor .colors:nth-child(7) span {
	background-color: #0f1e78;
}

#availableColor .colors:nth-child(8) span {
	background-color: #7c2877;
}

#availableColor .colors:nth-child(9) span {
	background-color: #757938;
}

#availableColor .colors:nth-child(10) span {
	background-color: #2a6df6;
}

#availableColor .colors:nth-child(11) span {
	background-color: #2a6df6;
}

#availableColor .colors:nth-child(12) span {
	background-color: #083178;
}

#availableColor .colors:nth-child(13) span {
	background-color: #5347f6;
}

#availableColor .colors:nth-child(14) span {
	background-color: #773b18;
}

#availableColor .colors:nth-child(15) span {
	background-color: #ffffff;
}

#availableColor .colors:nth-child(16) span {
	background-color: #bbb;
}

#availableColor .colors:nth-child(17) span {
	background-color: #ed3833;
}

#availableColor .colors:nth-child(18) span {
	background-color: #f9f850;
}

#availableColor .colors:nth-child(19) span {
	background-color: #73f440;
}

#availableColor .colors:nth-child(20) span {
	background-color: #6dfbfb;
}

#availableColor .colors:nth-child(21) span {
	background-color: #3e46f6;
}

#availableColor .colors:nth-child(22) span {
	background-color: #eb58f9;
}

#availableColor .colors:nth-child(23) span {
	background-color: #faf979;
}

#availableColor .colors:nth-child(24) span {
	background-color: #72f57b;
}

#availableColor .colors:nth-child(25) span {
	background-color: #74fbfb;
}

#availableColor .colors:nth-child(26) span {
	background-color: #826ef7;
}

#availableColor .colors:nth-child(27) span {
	background-color: #ed3f76;
}

#availableColor .colors:nth-child(28) span {
	background-color: #f17b3a;
}